<template>
  <!-- 客户关怀 -->
  <div class="customer_care">
    <!-- 顶部导航 -->
    <van-nav-bar
      title="客户列表信息"
      left-arrow
      @click-left="$router.go(-1)"
      right-text="新增"
      @click-right="$router.push('/newlyIncreasedCallOn')"
    />
    <!-- 搜索 -->
    <van-search
      v-model="Value"
      action-text="搜索"
      shape="round"
      show-action
      placeholder="关键字查询"
    />

    <!-- 客户 -->
    <div class="client">
      <van-cell-group
        v-for="(e, i) in VisitTheInformation.records"
        :key="i"
        @click="
          $router.push({
            path: '/VisitDetails',
            query: {
              id: JSON.stringify(e.id),
            },
          })
        "
      >
        <!-- 前面的图片 -->
        <img src="../assets/旗下企业-头像.png" alt="" />
        <!-- 单元格 -->
        <van-cell label="" center>
          <template #title>
            <span class="custom-title">
              拜访标题
              <span>{{ e.visitTitle }}</span>
            </span>
            <div class="custom-title">
              客户名称 <span>{{ e.custName }}</span>
            </div>
            <div class="custom-title">
              拜访时间 <span>{{ e.visitTime }}</span>
            </div>
          </template> </van-cell
        ><van-tag color="#fff7e7" text-color="#fd9418">定期回访</van-tag>
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { CustomerCare } from "@/request/api";
export default {
  data() {
    return {
      Value: "",

      picture: require("../assets/头像男 拷贝 4.png"),

      // 拜访信息
      VisitTheInformation: [],
    };
  },
  created() {
    CustomerCare({ keyword: "", current: 1, size: 10 }).then((res) => {
      this.VisitTheInformation = res.data;
      // console.log(this.VisitTheInformation);
    });
  },
};
</script>
 
<style lang = "less" scoped>
.customer_care {
  /* 顶部导航 */
  .van-hairline--bottom {
    background-color: #003399;
  }
  /deep/.van-nav-bar__title,
  /deep/.van-icon,
  /deep/.van-nav-bar__text {
    color: #ffffff;
  }
  .van-search__action {
    color: #039;
  }
  /* 客户 */
  .client {
    margin-top: 0.15rem;
    .van-tag {
      height: 0.16rem;
      width: 0.48rem;
      margin-top: 0.1rem;
      border: 1px solid #fd9418;
    }
    .van-cell-group {
      .van-cell {
        width: 2.4rem;
      }
      display: flex;
      img {
        width: 0.6rem;
        height: 0.6rem;
        padding-top: 0.15rem;
        padding-left: 0.13rem;
      }
      .custom-title {
        color: #999999;
        font-size: 0.14rem;
        span {
          padding-left: 0.1rem;
          color: #333333;
        }
      }
    }
  }
}
</style>